// 老板信息完善的路由容器组件
import React from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { updateUser } from '../../redux/action'
import HeaderSelector from '../../components/header-selector/header-selector'
import { Button, NavBar, InputItem, TextareaItem, Toast } from 'antd-mobile'

class DashenInfo extends React.Component {
  state = {
    header: '', //头像名称
    post: '', //职位
    info: '' //个人或职位简介
  }

  setHeader = header => this.setState({ header })

  handleChange = (name, val) => {
    this.setState({
      [name]: val
    })
  }

  save = () => {
    const { header, post, info } = this.state
    // console.log(this.state)
    if (!header) {
      return Toast.info('请选择头像')
    }
    if (!post) {
      return Toast.info('请填写求职职位')
    }
    if (!info) {
      return Toast.info('请填写个人介绍')
    }
    this.props.updateUser(this.state)
  }
  render() {
    const { header, type } = this.props.user
    if (header) {
      //说明信息已经完善
      const path = '/' + type
      return <Redirect to={path} />
    }
    return (
      <div>
        <NavBar>大神信息完善</NavBar>
        <HeaderSelector setHeader={this.setHeader} />
        <InputItem
          onChange={val => this.handleChange('post', val)}
          placeholder="请输入求职岗位"
        >
          求职岗位:
        </InputItem>
        <TextareaItem
          title="个人介绍:"
          rows={3}
          placeholder="请输入个人介绍 "
          onChange={val => this.handleChange('info', val)}
        />
        <Button type="primary" onClick={() => this.save()}>
          保&nbsp;&nbsp;&nbsp;存
        </Button>
      </div>
    )
  }
}

export default connect(state => ({ user: state.user }), { updateUser })(
  DashenInfo
)
